<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>机构管理</title>
	<meta name="decorator" content="nblank"/>
	<%@include file="/WEB-INF/views/include/ntreeview.jsp" %>
    <%@include file="/WEB-INF/views/include/treetable.jsp" %>
</head>
<body>
    <div class="content container">
        <h2 class="page-title">机构管理<small> 机构列表</small></h2>
        <div class="row">
            <div class="col-md-3">
                <section class="widget">
                    <div class="body">
                        <div id="mytree"></div>
                    </div>
                </section>
            </div>
            <div class="col-md-9">
                <section class="widget widget-tabs">
                    <header>
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="javascript:;">机构列表</a></li>
                            <shiro:hasPermission name="sys:office:edit">
                            <li><a id="toAdd" href="${ctx}/sys/office/form?parent.id=1">机构添加</a></li>
                            </shiro:hasPermission>
                        </ul>
                    </header>
                    <%--<sys:message content="${message}"/>--%>
                    <div class="body tab-content">
                        <div class="tab-pane active clearfix">
                            <table id="treeTable" class="table table-striped  table-condensed">
                                <thead>
                                <tr>
                                    <th>机构名称</th>
                                    <th>归属区域</th>
                                    <th>机构编码</th>
                                    <th>机构类型</th>
                                    <th>备注</th>
                                    <shiro:hasPermission name="sys:office:edit">
                                        <th>操作</th>
                                    </shiro:hasPermission></tr>
                                </thead>
                                <tbody id="treeTableList"></tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <script type="text/template" id="treeTableTpl">
        <tr id="{{row.id}}" pId="{{pid}}">
            <td><a href="${ctx}/sys/office/form?id={{row.id}}">{{row.name}}</a></td>
            <td>{{row.area.name}}</td>
            <td>{{row.code}}</td>
            <td>{{dict.type}}</td>
            <td>{{row.remarks}}</td>
            <shiro:hasPermission name="sys:office:edit">
                <td>
                    <a href="${ctx}/sys/office/form?id={{row.id}}">修改</a>
                    <a href="javascript:void(0);" onclick="confirm_self('要删除该机构及所有子机构项吗？', '${ctx}/sys/office/delete?id={{row.id}}');return false;">删除</a>
                    <a href="${ctx}/sys/office/form?parent.id={{row.id}}">添加下级机构</a>
                </td>
            </shiro:hasPermission>
        </tr>
    </script>
	<script type="text/javascript">
        $(function () {
            refreshTree();
            refreshTable("${ctx}/sys/office/list");
        });

        function refreshTable(url){
            $("#treeTableList").empty();
            $.ajax({
                url:url,
                type:"POST",
                dataType:"json",
                success:function(data){
                    if(data != null && data !== ""){
                        var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
                        var rootId = "0";
                        if(data.office != "" && data.office.id != ""){
                            rootId = data.office.id;
                        }
                        addRow("#treeTableList", tpl, data.list, rootId, true);
                        $("#treeTable").treeTable({expandLevel: 5});
                    }
                }
            });
        }

        function addRow(list, tpl, data, pid, root) {
            for (var i = 0; i < data.length; i++) {
                var row = data[i];
                if ((${fns:jsGetVal('row.parentId')}) == pid) {
                    $(list).append(Mustache.render(tpl, {
                        dict: {
                            type: getDictLabel(${fns:toJson(fns:getDictList('sys_office_type'))}, row.type)
                        }, pid: (root ? 0 : pid), row: row
                    }));
                    addRow(list, tpl, data, row.id);
                }
            }
        }

        function refreshTree() {
            $.getJSON(ctx + "/sys/office/treeData", function (data) {
                $('#mytree').treeview({
                    data: data,
                    onNodeSelected: function (event, node) {
                        var id = node.id == '0' ? '' :node.id;
                        <%--$('#officeContent').attr("src","${ctx}/sys/office/list?id="+id+"&parentIds="+node.pIds);--%>
                        refreshTable("${ctx}/sys/office/list?id="+id+"&parentIds="+node.pIds);
                        $("#toAdd").attr("href","${ctx}/sys/office/form?parent.id="+node.id);
                    },
                    onhoverColor: '#428bca'
                });
            });
        }

        function delItem(url){
            $.ajax({
                url:url,
                type:"POST",
                dataType:"json",
                success:function(data){
                    if(data != null && data !== "" && data == "ok"){
                        refreshTable("${ctx}/sys/office/list");
                    }
                }
            });
        }

        function confirm_self(msg , url){
            bootbox.confirm({
                size:"small",
                title: "系统提示",
                message:msg,
                callback: function(result){
                    if(result){
                        delItem(url);
                    }
                }
            });
        }
	</script>
</body>
</html>